<template>
	<view class="content">
		<view class="contentbox" :style="'height:'+headHeight+'px;background-color: rgba(255, 255, 255, '+nums+')'">
			<view class="container" :style="'height:'+navBarHeight+'px;top:'+imageTop+'px;'">
				<image :src="imageUrl +'zx.png'" mode="widthFix" class="logo"></image>
				</image>
			</view>
		</view>
		<image :src="imageUrl +'bgimg.png'" mode="widthFix" class="bg-img"></image>
		<view class="nos" :style="'margin-top: '+headHeight+'px;'"></view>
		<view class="new-list" v-for="(item,index) in realTimeList">
			<view class="new-box" @click="detail(item)">
				<view class="title-name">{{item.title}}</view>
				<view class="name-time"  v-if="false">
					<view>夷陵城市停车</view>
					<view>5小时前</view>
				</view>
			</view>
			<image :src="imageUrl + 'zixun/' +item.img+'.jpg'" mode="aspectFill"></image>
		</view>
		<view class="null"></view>
		<view class="foot">
			<image :src="imageUrl +'foot.png'" mode="widthFix" class="bgfoot-img"></image>
			<view class="foot-box">
				<view class="box-detail" @click="tab('/pages/index/index')">
					<image :src="imageUrl +'11.png'" mode="widthFix"></image>
					<view>首页</view>
				</view>
				<view class="box-detail">
					<image :src="imageUrl +'22.png'" mode="widthFix"></image>
					<view class="choice-color">资讯</view>
				</view>
				<image :src="imageUrl +'5.png'" mode="widthFix" class="alone" @click="tab('/pages/parkingPlace/parkingList')">
				</image>
				<view class="box-detail" @click="tab('/pages/order/order')">
					<image :src="imageUrl +'3.png'" mode="widthFix"></image>
					<view>订单</view>
				</view>
				<view class="box-detail" @click="tab('/pages/my/my')">
					<image :src="imageUrl +'4.png'" mode="widthFix"></image>
					<view>我的</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headHeight: 0,
				navBarHeight: 0,
				imageTop: 0,
				right: 0,
				nums: 0,
				realTimeList: [{
					title: '上线即破局：终结 “绕圈找位” 的烦恼',
					img:'1',
					memo: '“以前去海棠路打卡，光找车位就得绕半小时，现在打开小程序直接看余位，导航过去一步到位！” 峡江社区居民龙丽萍的感慨，道出了夷陵车主的共同体验。随着 “夷陵城市停车” 小程序正式启用，这一由夷陵经发控股集团打造的智慧平台，已接入包括峡江路生态停车场在内的多个场地，覆盖森林公园、河心公园、商业区等核心区域。车主只需在微信端搜索，即可实时查看目标停车场的剩余泊位数量、具体位置，配合精准导航功能，彻底告别 “盲找车位” 的窘境。以网红打卡地峡江路为例，其 89 个生态车位的动态信息实时同步至平台，春季樱花季游客停车效率提升近 3 倍。'
				}, {
					title: '全程无感化：缴费离场 “零停留”',
					img:'2',
					memo: '小程序的核心便捷性体现在 “先离场后付费” 的智能流程中。车主绑定车牌并开通无感支付后，车辆驶入停车场无需取卡，离场时系统自动识别车牌并完成扣费，全程无需开窗扫码或排队缴费。这种由车牌识别技术支撑的无人值守模式，不仅让峡江路等停车场的通行效率提升 40%，更避免了雨天、酷暑天的缴费不便。同时，平台支持微信、支付宝多渠道支付，还可直接在线开具电子发票，解决了 “报销找票” 的痛点。'
				}, {
					title: '服务一体化：从包月到优惠 “一键搞定”​',
					img:'3',
					memo: '针对不同车主需求，小程序整合了多元化便捷服务：通勤族可办理 “车场包期”，每月 240 元即可畅享固定车位；临时停车用户将能领取平台发放的优惠券，进一步降低停车成本。新能源车主更能享受专属福利，配合停车场内的充电桩资源，实现 “停车 + 补能” 一站式解决。此外，小程序还实时推送停车新规、场地维护等资讯，让车主随时掌握最新动态。​'
				}, {
					title: '跨平台互通：全市停车 “一卡通”',
					img:'4',
					memo: '依托宜昌市 “全市一个停车场” 智慧体系，夷陵停车小程序实现了与市级平台的数据互通。宜昌城市停车 APP 用户可直接在夷陵区域内缴费离场，无需重复注册操作。这种 “双平台支撑” 模式，让车主在夷陵与宜昌城区间通行时，停车服务无缝衔接，真正实现 “一城通停、一码通行”。​'
				}, {
					title: '智慧停车背后的民生温度',
					img:'5',
					memo: '从闲置空地改造的生态停车场，到指尖上的智慧服务，夷陵城市停车小程序的上线，不仅是技术升级的体现，更是 “以民为本” 的实践。正如居民所说：“车能停得舒心，出门才更顺心。” 随着更多停车场陆续接入，这份 “停车便捷感” 还将覆盖夷陵每一个角落。'
				}]
			}
		},
		onLoad() {
			// 获取胶囊按钮位置
			// 获取系统信息（主要是状态栏高度）
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const systemInfo = uni.getSystemInfoSync();

			// 计算顶部总高度：从屏幕顶部到导航栏底部的距离
			const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
			const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2; // 导航栏高度
			const totalTopHeight = statusBarHeight + navBarHeight; // 顶部总高度（含状态栏+导航栏）

			console.log('状态栏高度:', statusBarHeight);
			console.log('胶囊按钮信息:', menuButtonInfo);
			console.log('导航栏高度:', navBarHeight);
			console.log('顶部总高度:', totalTopHeight);
			this.headHeight = totalTopHeight
			this.navBarHeight = menuButtonInfo.height
			this.imageTop = menuButtonInfo.top
			this.right = menuButtonInfo.width + 20
		},
		methods: {
      go() {
				uni.navigateTo({
					url: '/pages/index2/index2'
				})
			},
			detail(item) {
				uni.navigateTo({
					url: '/pages/newsDetail/newsDetail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			tab(e) {
				uni.switchTab({
					url: e
				})
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 10) {
				console.log(111)
				this.nums = 1
			} else {
				this.nums = 0
				console.log(222)
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F4FAF7;
	}

	.bg-img {
		width: 750rpx;
		height: 520rpx;
		position: absolute;
		top: 0;
	}

	.contentbox {
		width: 750rpx;
		position: fixed;
		top: 0;
		z-index: 999;
		transition: background-color 500ms;
		background-color: #ffffff00;

		.container {
			width: 750rpx;
			position: absolute;
			bottom: 0rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 86rpx;

			.logo {
				margin-left: 40rpx;
				width: 90rpx;
				height: 64rpx;
				position: relative;
				z-index: 9999;
			}

			.seandcode {
				width: 64rpx;
				height: 64rpx;
				position: relative;
				z-index: 9999;
			}
		}
	}

	.card {
		width: 670rpx;
		height: 360rpx;
		position: relative;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		margin-top: 12rpx;
		box-shadow: 0px 4px 12px rgba(167, 188, 195, 0.6);

		.certification {
			width: 110rpx;
			height: 32rpx;
			position: absolute;
			right: 10rpx;
			top: 26rpx;
		}

		.prompt {
			width: 100%;
			text-align: center;
			position: absolute;
			bottom: 14rpx;
			font-size: 24rpx;
			color: rgba(40, 40, 40, 0.6);
		}

		.bg2-img {
			width: 670rpx;
			height: 360rpx;
			position: absolute;
			z-index: 6;
		}

		.bg3-img {
			width: 670rpx;
			height: 360rpx;
			position: absolute;
		}

		.address-box {
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			margin-left: 10rpx;
			position: relative;

			.address-img {
				width: 64rpx;
				height: 64rpx;
			}

			view {
				font-size: 24rpx;
				color: #1C274C;
			}

			.tab-img {
				width: 14rpx;
				height: 14rpx;
			}
		}

		.top1 {
			margin-top: 56rpx;
		}

		.top2 {
			margin-top: 76rpx;
		}

		.cart-box {
			width: 620rpx;
			display: flex;
			justify-content: space-between;
			margin-left: 30rpx;
			position: relative;

			.cart-detail {
				.head-name {
					font-size: 48rpx;
					color: #1C274C;
					font-weight: 700;
				}

				.number {
					font-size: 32rpx;
					color: #1C274C;
					font-weight: 700;
				}

				.timing {
					font-size: 24rpx;
					color: #1C274C;
					margin-top: 10rpx;
					margin-bottom: 10rpx;

					text {
						font-size: 42rpx;
						font-weight: 700;
						color: #5ADA7A;
					}
				}

				.time {
					font-size: 20rpx;
					color: rgba(40, 40, 40, 0.6);
				}

				.pay {
					width: 160rpx !important;
					margin-top: 26rpx !important;
				}

				.go {
					width: 136rpx;
					height: 48rpx;
					margin-top: 20rpx;
					border-radius: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: linear-gradient(to right, #00BBFF, #5ADA7A);

					view {
						font-size: 24rpx;
						color: #FFFFFF;
						margin-right: 10rpx;
					}

					image {
						width: 14rpx;
						height: 14rpx;
					}
				}
			}
		}

		.cart-img {
			width: 300rpx;
			height: 140rpx;
			position: absolute;
			bottom: 90rpx;
			right: 20rpx;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.classification-box {
		width: 720rpx;
		display: flex;
		flex-wrap: wrap;
		position: relative;

		.classification-detail {
			width: 20%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 30rpx;

			image {
				width: 90rpx;
				height: 90rpx;
			}

			view {
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				color: #1C274C;
				line-height: 36rpx;
			}
		}
	}

	.list-head-box {
		width: 690rpx;
		margin-top: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.head-title {
			display: flex;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			view {
				font-size: 36rpx;
				color: #1C274C;
				font-weight: 700;
			}
		}

		.look-more {
			display: flex;
			align-items: center;

			image {
				width: 24rpx;
				height: 24rpx;
			}

			view {
				font-size: 26rpx;
				color: rgba(40, 40, 40, 0.6);
				margin-right: 10rpx;
			}
		}
	}

	.new-list {
		width: 690rpx;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		position: relative;

		.new-box {
			width: 403rpx;
			height: 154rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			margin-left: 20rpx;

			.title-name {
				width: 100%;
				font-size: 32rpx;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.name-time {
				width: 100%;
				display: flex;

				view {
					font-size: 24rpx;
					margin-right: 10rpx;
					color: rgba(40, 40, 40, 0.6);
				}
			}
		}

		image {
			width: 220rpx;
			height: 154rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
		}
	}

	.null {
		width: 750rpx;
		height: 220rpx;
	}

	.foot {
		width: 750rpx;
		height: 198rpx;
		position: fixed;
		bottom: 0;

		.bgfoot-img {
			width: 750rpx;
			height: 198rpx;
		}

		.foot-box {
			width: 650rpx;
			height: 94rpx;
			position: absolute;
			top: 60rpx;
			left: 50rpx;
			display: flex;
			justify-content: space-between;

			.alone {
				width: 100rpx;
				height: 100rpx;
				margin-top: -20rpx;
			}

			.box-detail {
				width: 90rpx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				view {
					font-size: 22rpx;
					color: rgba(40, 40, 40, 0.6);
					line-height: 36rpx;
					margin-top: 10rpx;
					width: 100%;
					text-align: center;
				}

				.choice-color {
					color: #1C274C !important;
				}
			}
		}
	}
</style>
